<!doctype html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
    <title>HTML5拖拽-前端路上</title>
    <meta content="HTML5拖拽,flex布局,Win10开始菜单" name="Keywords">
    <meta content="该作品使用HTML5拖拽和flex布局模拟Win10开始菜单效果" name="Description">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" type="text/css" href="/asset/ui.css">
    <script>
        var _hmt = _hmt || [];
        (function() {
          var hm = document.createElement("script");
          hm.src = "https://hm.baidu.com/hm.js?f10103677155b485824f29def715eb5d";
          var s = document.getElementsByTagName("script")[0]; 
          s.parentNode.insertBefore(hm, s);
        })();
    </script>
</head>

<body>
<h1 class="hide">HTML5拖拽</h1>
<a href="//refined-x.com" title="前端路上" style="position: absolute;right: 0;top:0;padding:.5em;">前端路上</a>
    <style>
    body,
    html {
        height: 100%;
    }
    
    body {
        background: url(/asset/img2.jpg) center no-repeat;
        background-size: cover;
    }
    
    .startmenu {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 500px;
        height: 540px;
        background: rgba(0, 0, 0, .6);
        padding: 20px;
        max-height: 100%;
        box-shadow: 0 0 3px rgba(0,0,0,.5);
    }
    
    .flex-cell {
        height: 140px;
        transition: all ease 700ms;
        margin: 4px;
        text-align: center;
    }
    
    .flex-cell.dragstart {
        opacity: 0 !important;
    }
    .isDraging .flex-cell{
        opacity: .7;
    }
    </style>
    <div class="startmenu" id="wrapper">
        <div class="flex-row">
            <div class="flex-1 flex-cell flex-col justify-center bg-primary" draggable="true">日历</div>
            <div class="flex-1 flex-cell flex-col justify-center bg-success" draggable="true">腾讯QQ</div>
            <div class="flex-1 flex-cell flex-col justify-center bg-success" draggable="true">应用商店</div>
        </div>
        <div class="flex-row">
            <div class="flex-1 flex-cell flex-col justify-center bg-info" draggable="true">Xbox</div>
            <div class="flex-1 flex-cell flex-col justify-center bg-warning" draggable="true">OneNote</div>
        </div>
        <div class="flex-row">
            <div class="flex-1 flex-cell flex-col justify-center bg-danger" draggable="true">Chrome</div>
            <div class="flex-1 flex-cell flex-col justify-center bg-primary" draggable="true">Microsoft Edge</div>
            <div class="flex-1 flex-cell flex-col justify-center bg-success" draggable="true">记事本</div>
        </div>
    </div>
    <script src="/asset/sea.js" id="seajsnode"></script>
    <script type="text/javascript" src="//static-zt.oss-cn-qingdao.aliyuncs.com/modules/manifest.js"></script>
    <script>
    seajs.config({
        base: "//static-zt.oss-cn-qingdao.aliyuncs.com/modules",
        alias: {
            "audio": "audio/audio",
            "copy": "copy/ZeroClipboard",
            "flv": "flv/flv",
            "hook": "hook/hook",
            "jquery": "jquery/1/jquery.js",
            "validform": "validform/validform",
            "My97DatePicker": "My97DatePicker/WdatePicker",
            "raty": "raty/raty",
            "upload": "upload/upload",
            "makethumb": "upload/makethumb",
            "localResizeIMG": "upload/localResizeIMG",
            "video": "video/video",
            "webuploader": "webuploader/webuploader",
            // localstorage缓存
            "seajs-localcache": "seajs/seajs-localcache",
            // debug
            "seajs-debug": "seajs/seajs-debug"
        }
    });
    </script>
    <script>
    /**
     * index
     */
    define('startmenu', function(require) {
        var $ = require('jquery');

        var dragshadow = $('<div id="dragshadow" style="position:absolute;z-index:99;overflow:hidden;pointer-events:none" />').appendTo('body');
        var documentMoveInit;
        var dragData;
        var clearnode = function(that) {
            $(that).removeClass('dragstart');
            documentMoveInit = null;
            dragshadow
                .empty()
                .css({
                    width: 0,
                    height: 0,
                    left: 0,
                    top: 0
                })
                .get(0).style.transform = '';
        };
        $('#wrapper')
            .find('.flex-cell').each(function(i, e) {
                $(e).attr('id', 'wrapper-drag-cell-' + i);
            })
            .end()
            .on('mousedown', '.flex-cell', function(e) {
                var dragele = $(this);
                documentMoveInit = {
                    left: e.originalEvent.pageX,
                    top: e.originalEvent.pageY
                };
                dragshadow
                    .css({
                        width: dragele.outerWidth(true),
                        height: dragele.outerHeight(true),
                        left: dragele.offset().left,
                        top: dragele.offset().top
                    })
                    .html(dragele.get(0).outerHTML);
                dragele.addClass('dragstart');
            })
            .on('dragstart', '.flex-cell', function(e) {
                e.originalEvent.dropEffect = "move";
                dragData = $(this).attr('id');
                e.originalEvent.dataTransfer.setData('text/plain', $(this).attr('id'));
                $('#wrapper').addClass('isDraging');
            })
            .on('dragover', '.flex-cell', function(e) {
                e.preventDefault();
                var step = 'translate(' + (e.originalEvent.pageX - documentMoveInit.left) + 'px,' + (e.originalEvent.pageY - documentMoveInit.top) + 'px)';
                dragshadow.get(0).style.transform = step;
                var dropdata = dragData; //e.originalEvent.dataTransfer.getData('text/plain');
                var target = $('#' + dropdata);
                var mycenter = parseInt($(this).offset().left) + $(this).outerWidth() / 2;
                //console.log(mycenter);
                if (e.originalEvent.pageX > mycenter) {
                    $(this).after(target);
                } else {
                    $(this).before(target);
                }
            })
            .on('dragend', '.flex-cell', function(e) {
                e.preventDefault();
                clearnode(this);
                $('#wrapper').removeClass('isDraging');
            })
            .on('mouseup', '.flex-cell', function(e) {
                clearnode(this);
            });
    });
    seajs.use('startmenu');
    </script>
</body>

</html>
